<template>
  <div class="app-container">
    <el-tabs v-model="form.a" @tab-click="handleClick">
      <el-tab-pane label="订单" name="first">
        <el-form label-width="120px" size="small" class="store-form">
          <el-form-item label="消息提醒方式">
            <el-select v-model="form.b" placeholder="请选择">
              <el-option
                v-for="item in 10"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消息提醒方式">
            <el-radio-group v-model="form.c">
              <el-radio :label="1">经典女生版</el-radio>
              <el-checkbox-group v-model="form.cc">
                <el-checkbox v-for="city in 6" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group>
              <el-radio :label="2">经典男生版</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="消息提醒音量">

          </el-form-item>
          <el-form-item label="消息提示频率">

          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="自动接单设置" name="second">
        <el-container>
          <el-header>
            接单方式设置（同一时间只能开启一种接单方式）
          </el-header>
          <el-main>
            <el-radio-group v-model="form.d">
              <el-radio :label="3">GPRS自动接单</el-radio>
              <el-radio :label="6">PC自动接单</el-radio>
              <el-radio :label="9">手动接单</el-radio>
            </el-radio-group>
            <el-button size="small" class="system-btn">保存</el-button>
          </el-main>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="聊天设置" name="third">
        <el-container>
          <el-header>聊天设置</el-header>
          <el-main>
            <el-form label-width="120px" class="store-form">
              <el-form-item label="显示消息：">
                <el-switch
                  v-model="form.e"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
                <span>开启后，您可以跟客户进行即时沟通，如商品和订单等信息</span>
              </el-form-item>
              <el-form-item label="客服设备名称：">
                我爱美食客服  <span style="color: red">修改</span>
              </el-form-item>
              <el-form-item label="提醒消息：">
                消息提醒  <span style="color: red">试听</span>
                未回复再次提醒 <span style="color: red">试听</span>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>

      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          c: 1,
          a: 'first'
        }
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      }
    }
  }
</script>

<style src="./index.scss" lang="scss" scoped></style>
